import 'dart:math';

import 'package:flutter/material.dart';

class FavoriteAnimationIcon extends StatefulWidget {
  static const double defaultSize = 100;
  final double size;
  final Color color;
  final Function? animationComplete;
  final Offset position;

  const FavoriteAnimationIcon(
      {required Key key,
      this.size = defaultSize,
      this.color = Colors.deepOrange,
      this.animationComplete,
      required this.position})
      : super(key: key);

  @override
  _FavoriteAnimationIconState createState() => _FavoriteAnimationIconState();
}

class _FavoriteAnimationIconState extends State<FavoriteAnimationIcon>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  static const int _duration = 600;
  bool isFavorite = false;
  static final double _rotate = pi / 10 * (2 * Random().nextDouble() - 1);

  // 展示的进度值0.1
  static const double appearValue = 0.1;

  // 消失的进度值0.8
  static const double dismissValue = 0.8;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: _duration));
    _controller.addListener(() {
      setState(() {});
    });

    startAnimation();
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Icon icon = Icon(
      Icons.favorite_outlined,
      size: widget.size,
      color: Colors.deepOrange,
    );
    final dxy = widget.size / 2;
    print(
        'video-onDoubleTap-icon 双击假如offset坐标${dxy + widget.position.dx}-${dxy + widget.position.dy}');
    var rotateScale = Transform.rotate(
      angle: rotate,
      child: Transform.scale(
        scale: scale,
        alignment: Alignment.bottomCenter,
        child: icon,
      ),
    );

    /// 渐变
    var child = ShaderMask(
      shaderCallback: (Rect bundle) => RadialGradient(
              colors: const [Color(0xFFEE6E6E), Color(0xFFF03F3F)],
              center: Alignment.topLeft.add(const Alignment(0.66, 0.66)))
          .createShader(bundle),
      blendMode: BlendMode.srcATop,
      child: rotateScale,
    );

    return Positioned(
      left: widget.position.dx - dxy,
      top: widget.position.dy - dxy,
      child: Opacity(
        opacity: opacity,
        child: child,
      ),
    );
  }

  /// 旋转
  double get rotate {
    return pi / 10 * (2 * Random().nextDouble() - 1);
  }

  /// 缩放
  double get scale {
    if (controllerValue < appearValue) {
      // 处于出现阶段
      return 1 + appearValue - controllerValue;
    }

    if (controllerValue < dismissValue) {
      // 处于正常展示阶段
      return 1;
    }

    // 处于消失放大阶段
    return 1 + (controllerValue - dismissValue) / (1 - dismissValue);
  }

  /// 透明度
  double get opacity {
    if (controllerValue < appearValue) {
      // 渐渐显示阶段，需要动画
      // 处于出现阶段
      print(
          'video-animation-opacity ${controllerValue / appearValue}-controllerValue=$controllerValue-appearValue=$appearValue');
      return controllerValue / appearValue;
    }
    if (controllerValue < dismissValue) {
      // 显示阶段，不需要动画
      print('video-animation-opacity 1');
      return 1;
    }
    print(
        'video-animation-opacity ${(1 - controllerValue) / (1 - dismissValue)}-controllerValue=${1 - controllerValue}-appearValue=${1 - dismissValue}');
    return (1 - controllerValue) / (1 - dismissValue);
  }

  double get controllerValue {
    return _controller.value;
  }

  Future<void> startAnimation() async {
    await _controller.forward();
    widget.animationComplete!.call(); // 看到没？这里使用的语法糖很像js的执行
  }
}
